<!-- 服装详细，给普通用户看的 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE>
<html>

	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/header_changeLi.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery-ui.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/bootstrap.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/changeA.js"></script>
		<script src="${pageContext.request.contextPath}/js/common/page_match.js"></script>
		<script src="${pageContext.request.contextPath}/js/common/words_deal.js"></script>
		<script src="${pageContext.request.contextPath}/js/common/changPicture.js"></script>
		<script src="${pageContext.request.contextPath}/js/common/liked_coll.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery.slider.js"></script>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/common/main_head.css'>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/designer/want_buy.css'>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/common/changPicture.css'>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/common/font-awesome.min.css">
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/bootstrap/bootstrap.min.css'>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/enterprise/main.css'>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/common/flickity-docs.css'>
		<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/common/tabe.min.css'>
		<link href="${pageContext.request.contextPath}/css/bootstrap/bootstrap-combined.min.css" rel="stylesheet" media="screen">
		<link href="${pageContext.request.contextPath}/css/common/page.css" rel="stylesheet">
		<title></title>
	</head>

	<body>
		<header>
			<div class="rightTop">
				<ul>
					<li><a href="#">登录</a></li>
					<li class="separator">|</li>
					<li><a href="#">注册</a></li>
					<li class="separator">|</li>
					<li><a href="login.html">个人中心</a></li>
				</ul>
			</div>
			<div class="headermenu">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">作品</a></li>
					<li><a href="#">设计师</a></li>
					<li><a href="#">品牌服装</a></li>
					<li><a href="#">服装企业</a></li>
					<li class="curent"><a href="#">面料</a></li>
					<li><a href="#">供应商</a></li>
					<li><a href="#">资讯</a></li>
				</ul>
			</div>
			<div class="search">
				<input type="text" placeholder="我想找···" />
			</div>
		</header>
		<div class="con">

			<!--轮播图显示-->
			<div id="pagebody">
				<span class="c_title">FCS > 面料辅料 > 面料辅料详细</span>
				<div id="sidebar">
					
					<!--中间-->
					<div class="main">
						<div class="gallery">
							<div class="content-wrap">
								<div class="example duo">
									<div class="example__demo duo__cell">
										<div class="gallery js-flickity" data-flickity-options='{ "wrapAround": true }'>
											<div class="gallery-cell">
												<c:if test="clothing.photo_url1!=null">
													<a href="#"><img src="${pageContext.request.contextPath}/${clothing.photo_url1}" alt=""></a>
												</c:if>
											</div>
											<div class="gallery-cell">
												<c:if test="clothing.photo_url2!=null">
													<a href="#"><img src="${pageContext.request.contextPath}/${clothing.photo_url2}" alt=""></a>
												</c:if>
											</div>
											<div class="gallery-cell">
												<c:if test="clothing.photo_url3!=null">
													<a href="#"><img src="${pageContext.request.contextPath}/${clothing.photo_url3}" alt=""></a>
												</c:if>
											</div>
											<div class="gallery-cell">
												<c:if test="clothing.photo_url4!=null">
													<a href="#"><img src="${pageContext.request.contextPath}/${clothing.photo_url4}" alt=""></a>
												</c:if>
											</div>
											<div class="gallery-cell">
												<c:if test="clothing.photo_url5!=null">
													<a href="#"><img src="${pageContext.request.contextPath}/${clothing.photo_url5}" alt=""></a>
												</c:if>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="detailed">
							<h4>详细信息</h4>
							<table>
								<tr>
									<td width="58px">名称:</td>
									<td>${clothing.name}</td>
								</tr>
								<tr>
									<td>货号:</td>
									<td>${clothing.no}</td>
								</tr>
								<tr>
									<td>分类:</td>
									<td>${clothingType.name}</td>
								</tr>
								<tr>
									<td>风格:</td>
									<td>${style.value}</td>
								</tr>
								<tr>
									<td>款式:</td>
									<td>${pattern.value}</td>
								</tr>
								<tr>
									<td>年份季节:</td>
									<td>${clothing.year}&nbsp;${clothing.season}</td>
								</tr>
								<span class="intro">简介:</span>
								<p class="intro introText">${clothing.introduction}</p>
							</table>
						</div>
						<div class="allbtn">
							<a class="addHref" href="javaScript:;">想买(<span class="saddHref" ></span>)</a>
							<a class="liked" href="javaScript:;">喜欢(<span class="sliked" >${clothing.like }</span>)</a>
							<a class="coll" href="javaScript:;">收藏(<span class="scoll" >${clothing.collected }</span>)</a>
						</div>

					</div>

					<script src="js/flickity-docs.min.js"></script>

					<!--企业信息-->
					<div class="posts">
						<span class="bartitle">企业信息:</span>
						<table>
								<tr>
									<td width="58px">名称:</td>
									<td>${enterpriseInfo.name}</td>
								</tr>
								<tr>
									<td>地址:</td>
									<td>${enterpriseInfo.address}</td>
								</tr>
								<tr>
									<td>电话:</td>
									<td>${enterpriseInfo.phone}</td>
								</tr>
								<tr>
									<td>网址:</td>
									<td>${enterpriseInfo.website}</td>
								</tr>
								<tr>
									<td>传真:</td>
									<td>${enterpriseInfo.fax}</td>
								</tr>
								<tr>
									<td>联系人姓名:</td>
									<td>${enterpriseInfo.link_name}</td>
								</tr>
								<tr>
									<td>联系人电话:</td>
									<td>${enterpriseInfo.link_phone}</td>
								</tr>
							</table>
					</div>
					
				</div>
				<div id="mainbody">
					<div class="span9" id="span9left">
						<ul id="myTab" class="nav nav-tabs">
							<li class="active"><a href="#match" data-toggle="tab">相关</a></li>
							<li><a href="#comment" data-toggle="tab" id="clickBrand">评论</a></li>
						</ul>
						<div id="myTabContent" class="tab-content">
							 <div class="tab-pane fade in active" id="match">
								<div class="design" style="height: 181px;">
									<div class="special">
										<a>相似服装</a>
									</div>
									<div class="slider-box slider-box1">
										<a href='javascript:;' class="slider-prev slider-btn slider-prev1"></a>
										<div class="slider-wrapper slider-wrapper1">
											<ul class='slider-move slider-move1'>
												<c:forEach items="${similar_clothings}" var="similar_clothings">
												<li>
													<img src="${similar_clothings.photo_url1}">
												</li>
												</c:forEach>
											</ul>
										</div>
										<a href='javascript:;' class="slider-next slider-btn slider-next1"></a>
									</div>
								</div>

								<div class="fabric" style="height: 181px;">
									<div class="special2">
										<a>匹配面料</a>
									</div>
									<div class="slider-box slider-box2">
										<a href='javascript:;' class="slider-prev slider-btn slider-prev2"></a>
										<div class="slider-wrapper slider-wrapper2">
											<ul class='slider-move slider-move2'>
												<c:forEach items="${fabrics}" var="fabrics">
												<li>
													<img src="${fabrics.photo_url1}">
												</li>
												</c:forEach>
											</ul>
										</div>
										<a href='javascript:;' class="slider-next slider-btn slider-next2"></a>
									</div>
								</div>
								<div class="design" style="height: 181px;">
									<div class="special">
										<a>匹配设计作品</a>
									</div>
									<div class="slider-box slider-box3">
										<a href='javascript:;' class="slider-prev slider-btn slider-prev3"></a>
										<div class="slider-wrapper slider-wrapper3">
											<ul class='slider-move slider-move3'>
												<c:forEach items="${designs}" var="designs">
												<li>
													<img src="${designs.effect_url}">
												</li>
												</c:forEach>
											</ul>
										</div>
										<a href='javascript:;' class="slider-next slider-btn slider-next3"></a>
									</div>
								</div>

							</div>

							<div class="tab-pane fade" id="comment">
								<div class="content-form">
									<div id="ping">
										<div class="tech-news-grids">
											<c:forEach items="${comments}" var="data"}><!--4条记录-->
												<div class="tech-news-grid span_66">
													<img style="width: 20px;height: 20px;" src="" />
													${data.user.username}：
													<!--用户名-->
													<p>${data.content}</p>
													<!--评论内容-->
												</div>
											</c:forEach>
											<div class="clearfix"></div>

										</div>
										<!--分页-->
										<div class="paging">
											<div style="display: none;">
												<span class="pages">${data.property.pageCount}</span>
												<!--页数-->
												<span class="pageIndex">${pageindex}</span>
												<!--当前页码-->
												<span class="pagesize">3</span>
												<!--每页记录数-->
												<span class="hasNext">${data.property.hasNext}</span>
												<!--是否有下一页(boolean)-->
												<span class="selfUrl">/special/getSpecial.do</span>
												<!--请求action-->
												<span class="userId">${user_id}</span>
												<!--用户ID-->
												<span class="designerId_enterpriseId">${_id}</span>
												<!--designerId_enterpriseId-->
												<span class="object_id">${object_id}</span>
												<!--商品ID-->
												<span class="object_type">${object_type}</span>
												<!--商品类型-->
												<span class="commonUrl">${pageContext.request.contextPath}</span>
												<!--绝对路径-->
											</div>
											<div class="showPaging">
												<a class="prev" href="${pageContext.request.contextPath}/demand/getSpecial.do?designer_id=${designer_id }&pageindex=${json.property.pageIndex-1 }&pagesize=4">
					上一页</a>
												<select class="pageNum">
													<option value="0">请选择跳转的页数</option>
													<option value="1">第1页</option>
													<option value="2" selected="">第2页</option>
												</select>
												<a class="next" href="${pageContext.request.contextPath}/demand/getSpecial.do?designer_id=${designer_id }&pageindex=${json.property.pageIndex+1 }&pagesize=4">
					下一页</a>
											</div>
										</div>
										<!--分页结束-->

										<form>
                                            <textarea name="textarea" id="TextArea" cols="45" rows="5" onkeyup="words_deal();" 
                                            	 placeholder="在此发表您的看法"></textarea>
											<div class="leave">还可输入<span id="textCount">100</span>个字</div>
											<input type="button" value="发表" class="view"/>
										</form>
									</div>
								</div>
							</div>
						</div>

						<script>
							$(function() {
								$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
									// 获取已激活的标签页的名称
									var activeTab = $(e.target).text();
									// 获取前一个激活的标签页的名称
									var previousTab = $(e.relatedTarget).text();
									$(".active-tab span").html(activeTab);
									$(".previous-tab span").html(previousTab);
								});
							});
						</script>
					</div>
				</div>
			</div>

		</div>
	</body>

</html>